<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS属性示例</title>
    <style>
        /* 文本属性 */
        .text-properties {
            color: #333;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            text-decoration: underline;
            line-height: 1.6;
        }
        
        /* 背景属性 */
        .background-properties {
            background-color: #f0f0f0;
            background-image: url('background.jpg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            padding: 50px;
            color: white;
            text-shadow: 1px 1px 2px black;
        }
        
        /* 盒模型属性 */
        .box-model {
            width: 300px;
            height: 200px;
            margin: 20px auto;
            padding: 20px;
            border: 3px solid blue;
            background-color: #e6f2ff;
            box-sizing: border-box;
        }
        
        /* 布局属性 */
        .layout {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: red;
        }
        
        .float-example {
            float: left;
            width: 150px;
            height: 150px;
            margin: 10px;
            background-color: green;
        }
        
        .clear-example {
            clear: both;
            padding: 10px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="text-properties">
        <h2>文本属性示例</h2>
        <p>这是一个使用了多种文本属性的段落。</p>
    </div>
    
    <div class="background-properties">
        <h2>背景属性示例</h2>
        <p>这个div使用了背景图片和其他背景属性。</p>
    </div>
    
    <div class="box-model">
        <h3>盒模型属性示例</h3>
        <p>这个div展示了width、height、margin、padding和border属性。</p>
    </div>
    
    <div class="layout">元素1</div>
    <div class="layout">元素2</div>
    <div class="layout">元素3</div>
    
    <div class="float-example">浮动元素1</div>
    <div class="float-example">浮动元素2</div>
    <div class="clear-example">清除浮动后的元素</div>
</body>
</html>